<template>
  <header class="relative flex justify-center bg-white pb-[6px] shadow">
    <div
      class="w-[150vw] h-[210px] bg-[#12B7ED] rounded-[50%] absolute -left-[25vw] -top-[66.25px] shadow"
    >
    </div>
    <main class="relative z-10 pt-[75px]">
      <section class="w-[85.7px] h-[85.7px] enter-x">
        <img src="../../../assets/images/user_head.png" />
      </section>
      <footer class="text-center mt-[5px] enter-x">
        <p class="text-[17px] text-[#353535]">
          {{ getUserName }}
        </p>
        <p class="text-[#545454] text-[12px] mt-[7px] enter-x">
          {{ getClassName }}
        </p>
      </footer>
    </main>
  </header>
</template>

<script setup lang="ts">
  import { useUserInfoStoreWithOut } from '@/stores/modules/userInfo';

  const { getUserName, getClassName } = useUserInfoStoreWithOut();
</script>
